<template>
  <div>
    <el-drawer v-model="props.drawerFlag" :title="drawerTile" size="40%" direction="rtl" class="demo-drawer" @close="close">
      <template #default>
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="auto" class="demo-ruleForm" status-icon>
          <el-form-item label="vlan id" prop="vlanId" :rules="[{ required: true, message: '请输入vlan id' }]">
            <el-input v-model="ruleForm.vlanId" :disabled="drawerTile=='修改VLAN'" />
          </el-form-item>
          <el-form-item label="vlan 名称" prop="vlanName" :rules="[{ required: true, message: '请输入vlan 名称' }]">
            <el-input v-model="ruleForm.vlanName" />
          </el-form-item>

          <el-form-item label="CIDR" prop="cird" :rules="[{ required: true, message: '请输入CIDR' }]" >
            <el-input v-model="ruleForm.cird" :disabled="drawerTile=='修改VLAN'" />
          </el-form-item>
          <!-- <el-form-item label="其实IP" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="截止IP" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="P池大小" prop="name"> 
            <el-input v-model="ruleForm.name" />
          </el-form-item> -->
          <el-form-item label="网关地址" prop="vlanGateway" :rules="[{ required: true, message: '请输入网关地址' }]">
            <el-input v-model="ruleForm.vlanGateway"   />
          </el-form-item>
        </el-form>
      </template>

      <template #footer>
        <div style="flex: auto">
          <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
          <el-button>关闭</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules , } from 'element-plus';
import {ipVlanAdd,ipVlanEdit} from '@/api/ip'
const props = defineProps({
  drawerFlag: Boolean,
  drawerTile: String,
  getList:Function,
  rowData:Object
});
const emit = defineEmits(['update:drawerFlag']);

const ruleFormRef = ref<FormInstance>();
const data = reactive({
  ruleForm: {
  }
});

const { ruleForm } = toRefs(data);

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async(valid, fields) => {
    if (valid) {
        console.log(ruleForm.value);
        console.log(props.drawerTile);
        const res  =   props.drawerTile=='添加VLAN'?  await ipVlanAdd({...ruleForm.value}) :await ipVlanEdit({...ruleForm.value})
      console.log(res);
      if(res.data){
        ElMessage.success(props.drawerTile+'成功')
        await props?.getList()
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};   

watchEffect(()=>{
  if(props.drawerTile=='添加VLAN'){
    ruleForm.value = {}
  }else if(props.drawerTile=='修改VLAN'){
    ruleForm.value = {...props.rowData}

  }
})

// 关闭抽屉
const close = () => {
  emit('update:drawerFlag', false);
};
</script>

<style scoped lang="scss"></style>
